import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Button, Col, Row, Spin, Steps, message } from 'antd';
import React, { Ref, useRef, useState, useMemo } from 'react';
import { ISourceIntentionAPI } from '../common/type';
import { BookOutlined, SolutionOutlined } from '@ant-design/icons';
import UpdateTable from './UpdateTable';
import { getBidService } from '../services';
import { UpdateForm } from './UpdateForm';

export const UpdateModal: React.FC<ISourceIntentionAPI.IUpdateModal> = ({ curRes, onClose, updateState, reloadManage }) => {
  /**弹框的ref*/
  const updateModalRef: Ref<IOneModalRef> = useRef(null);

  /**详情方法Callback*/
  const getBidCallback = (res: Record<string, any>) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
    }
  };

  /**详情方法services*/
  const { getBidLoading, getBidRun, getBidInfo } = getBidService(getBidCallback);

  /**Table多选框的key*/
  const [TableKeys, setTableKeys] = useState<Array<any>>([]);

  /**current步骤条*/
  const [current, setCurrent] = useState(0);

  /**步骤条数据*/
  const StepData: Array<any> = [
    {
      title: '寻源列表',
      status: 'finish',
      icon: <BookOutlined style={{ fontSize: '1.5rem' }} />,
    },
    {
      title: '基本信息',
      status: 'finish',
      icon: <SolutionOutlined style={{ fontSize: '1.5rem' }} />,
    },
  ];

  /**关闭弹窗的方法*/
  const onCloseModal = () => {
    if (updateModalRef) {
      if (updateModalRef.current) {
        if (updateModalRef.current.onModalCancel) {
          updateModalRef.current.onModalCancel();
        }
      }
    }
  };

  /**确定方法*/
  const onSave = () => {
    onCloseModal();
  };

  /**取消方法*/
  const onCancel = () => {
    onCloseModal();
  };

  /**点击确定*/
  const onConfirm = () => {
    onCloseModal();
  };

  const allLoading = useMemo(() => {
    return false;
  }, [getBidLoading]);

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={updateModalRef}
      title={updateState?.title}
      onCancel={onClose}
      onOk={onConfirm}
      width={1200}
      bodyStyle={{
        padding: '5px 0px',
        height: '500px',
      }}
      footer={[
        current === 0 && (
          <Button
            disabled={!Boolean(TableKeys?.length)}
            onClick={() => {
              setCurrent(1);
            }}
          >
            下一步
          </Button>
        ),
        current === 1 && (
          <Button
            onClick={() => {
              setCurrent(0);
            }}
          >
            上一步
          </Button>
        ),
        <Button key="back" loading={allLoading} onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" loading={allLoading} onClick={onSave}>
          确定
        </Button>,
      ]}
    >
      <Spin spinning={false}>
        <div
          className="SourceInten-UpdateModal"
          style={{
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
            overflow: 'hidden',
          }}
        >
          <div style={{ padding: '15px 1rem' }}>
            <Steps current={current} items={StepData} />
          </div>
          <div
            style={{
              flex: 'auto',
              overflow: 'hidden',
            }}
          >
            {/* Table */}
            {current === 0 ? (
              <UpdateTable
                curRes={curRes}
                getBidInfo={getBidInfo}
                defaultSourceKey={TableKeys}
                onSaveSelectRow={(rowKey: Array<any>) => {
                  setTableKeys(rowKey);
                }}
              />
            ) : (
              <UpdateForm />
            )}
          </div>
        </div>
      </Spin>
    </OneModal>
  );
};
